<template>
  <div class="charts-container">
    <div ref="lineChart" class="chart-item"></div>
    <div ref="barChart" class="chart-item"></div>
    <div ref="pieChart" class="chart-item"></div>
    <div ref="radarChart" class="chart-item"></div>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const lineChart = ref(null);
    const barChart = ref(null);
    const pieChart = ref(null);
    const radarChart = ref(null);
    let lineInstance, barInstance, pieInstance, radarInstance;

    const initCharts = () => {
      // 折线图 - 表白趋势（使用粉紫色主色）
      lineInstance = echarts.init(lineChart.value);
      lineInstance.setOption({
        title: { 
          text: '每日表白趋势', 
          left: 'center', 
          textStyle: { color: '#d63384' } // 粉紫色主色[6](@ref)
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['清晨', '午间', '下午', '傍晚', '深夜'],
          axisLabel: { color: '#c71585' } // 深粉色标签
        },
        yAxis: { 
          type: 'value',
          axisLabel: { color: '#8b008b' } // 紫罗兰色
        },
        series: [{
          data: [68, 155, 89, 240, 180], 
          type: 'line',
          smooth: true,
          color: '#e83e8c', // 粉红色
          areaStyle: { color: 'rgba(232,62,140,0.1)' },
          symbol: 'heart',
          symbolSize: 14
        }]
      });

      // 柱状图 - 表白方式（使用爱心渐变）
      barInstance = echarts.init(barChart.value);
      barInstance.setOption({
        title: { 
          text: '表白方式排行', 
          left: 'center', 
          textStyle: { color: '#d63384' } 
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['文字墙', '语音', '视频', '礼物', '线下'],
          axisLabel: { color: '#c71585', rotate: 30 }
        },
        yAxis: { 
          type: 'value',
          axisLabel: { color: '#8b008b' }
        },
        series: [{
          data: [356, 278, 189, 155, 89], 
          type: 'bar',
          barWidth: '60%',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ff69b4' }, // 浅粉红
            { offset: 1, color: '#d63384' }  // 深粉紫
          ]),
          itemStyle: { 
            borderRadius: [5, 5, 0, 0],
            shadowColor: 'rgba(216,51,132,0.3)' 
          }
        }]
      });

      // 饼图 - 表白类型（使用浪漫配色）
      pieInstance = echarts.init(pieChart.value);
      pieInstance.setOption({
        title: { 
          text: '表白类型占比', 
          left: 'center', 
          textStyle: { color: '#d63384' } 
        },
        tooltip: { 
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} (占比{d}%)' 
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          label: { color: '#2c3e50' },
          data: [
            { value: 485, name: '暗恋', itemStyle: { color: '#ff69b4' } }, // 浅粉红
            { value: 356, name: '公开', itemStyle: { color: '#e83e8c' } },  // 粉红
            { value: 278, name: '匿名', itemStyle: { color: '#d63384' } },  // 粉紫
            { value: 189, name: '创意', itemStyle: { color: '#ffb6c1' } },  // 浅粉
            { value: 155, name: '挽回', itemStyle: { color: '#8a2be2' } }   // 浅紫
          ],
          emphasis: { 
            itemStyle: { 
              shadowBlur: 10,
              shadowColor: 'rgba(216,51,132,0.2)'
            } 
          }
        }]
      });

      // 雷达图 - 表白评价（使用粉紫色系）
      radarInstance = echarts.init(radarChart.value);
      radarInstance.setOption({
        title: { 
          text: '表白质量分析', 
          left: 'center', 
          textStyle: { color: '#d63384' } 
        },
        radar: {
          indicator: [
            { name: '浪漫度', max: 100 },
            { name: '创意度', max: 100 },
            { name: '响应速度', max: 12 },
            { name: '视觉效果', max: 100 },
            { name: '成功率', max: 100 }
          ],
          axisLine: { lineStyle: { color: '#e83e8c' } }
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [92, 88, 9, 90, 82],
              name: '文字墙',
              color: '#d63384',
              areaStyle: { color: 'rgba(214,51,132,0.2)' }
            },
            {
              value: [85, 92, 8, 86, 78],
              name: '视频',
              color: '#ff69b4',
              areaStyle: { color: 'rgba(255,105,180,0.2)' }
            }
          ],
          symbol: 'heart',
          symbolSize: 10
        }]
      });
    };

    const handleResize = () => {
      [lineInstance, barInstance, pieInstance, radarInstance].forEach(
        chart => chart && chart.resize()
      );
    };

    onMounted(() => {
      initCharts();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
      [lineInstance, barInstance, pieInstance, radarInstance].forEach(
        chart => chart && chart.dispose()
      );
    });

    return { lineChart, barChart, pieChart, radarChart };
  }
}
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 1400px;
  height: 800px;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #fff0f5 0%, #ffe4e1 100%); /* 浅粉渐变[6,8](@ref) */
}

.chart-item {
  width: 60%;
  height: 60%;
  min-width: 500px;
  min-height: 300px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(216,51,132,0.1); /* 粉紫阴影 */
  border-radius: 12px;
  margin: 10px;
  background: rgba(255,255,255,0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(232,62,140,0.2); /* 粉红边框[7](@ref) */
}

.chart-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 30px rgba(216,51,132,0.15);
}
</style>